<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="4" class="custom-title-box" >
       <div class="con-head-per">
        <div class="con-head">系统操作流程</div>
        <!-- <el-divider>
          <el-icon><star-filled /></el-icon>
        </el-divider> -->
        <!-- <el-card class="update-log payeeInfo-left"></el-card> -->
        <el-card class="flow" shadow="always">
          <div class="flow-content1">开始</div>
          <div class="line-img">
            <div class="line"></div>
            <el-icon class="line-ico"><CaretBottom /></el-icon>
          </div>
          <div class="flow-content2" shadow="always">
            <p>录入基础信息</p>
            <p>（包含：签约方信息、收支计划、验收情况、合同附件分类信息）</p>
          </div>
          <div class="line-img">
            <div class="line"></div>
            <el-icon class="line-ico"><CaretBottom /></el-icon>
          </div>
          <div class="flow-content2">
            <p>录入合同信息</p>
            <p>（包含：签约方信息、收支计划、验收情况、合同附件分类信息）</p>
          </div>
          <div class="line-img">
            <div class="line"></div>
            <el-icon class="line-ico"><CaretBottom /></el-icon>
          </div>
          <div class="flow-content2">
            <p>合同提交审批</p>
            <p>（合同创建完需提交给领导审批）</p>
          </div>
          <div class="line-img">
            <div class="line"></div>
            <el-icon class="line-ico"><CaretBottom /></el-icon>
          </div>
          <div class="flow-content2">
            <p>合同其他操作</p>
            <p>（补充协议、变更合同、纠纷登记、合同中止、合同终止）</p>
          </div>
          <div class="line-img">
            <div class="line"></div>
            <el-icon class="line-ico"><CaretBottom /></el-icon>
          </div>
          <div class="flow-content2">
            <p>合同请款</p>
            <p>（合同满足情况条件，则合同可以申请请款）</p>
          </div>
          <div class="line-img">
            <div class="line"></div>
            <el-icon class="line-ico"><CaretBottom /></el-icon>
          </div>
          <div class="flow-content2">
            <p>合同验收</p>
            <p>（根据创建合同时合同的内容进行合同验收，验收通过后，提交验收通过的资料到系统）</p>
          </div>
          <div class="line-img">
            <div class="line"></div>
            <el-icon class="line-ico"><CaretBottom /></el-icon>
          </div>
          <div class="flow-content2">
            <p>合同完结</p>
            <p>（合同请款完，合同验收通过，并且合同已过截止时间，则应对的合同就可以完结）</p>
          </div>
          <div class="line-img">
            <div class="line"></div>
            <el-icon class="line-ico"><CaretBottom /></el-icon>
          </div>
          <div class="flow-content2">
            <p>合同归档</p>
            <p>（合同完结后，可以选择对合同归档，进行合同存档）</p>
          </div>
          <div class="line-img">
            <div class="line"></div>
            <el-icon class="line-ico"><CaretBottom /></el-icon>
          </div>
          <div class="flow-content1">结束</div>
        </el-card>
       </div>
      </el-col>
      <el-col :span="10" class="custom-title-box">
        <div class="con-head-per con-head-per-b">
          <div class="con-head">台账</div>
          <!-- <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider> -->
          <el-card class="tai-list">
            <div class="report-form-list-content">
              <div class="list">
                <span>合同总数量：</span>
                <span>{{ ContractLedgerResp.value1 }}</span>
              </div>
              <div class="list">
                <span>本月合同数量：</span>
                <span>{{ ContractLedgerResp.value2 }}</span>
              </div>
              <div class="list">
                <span>本年合同数量：</span>
                <span>{{ ContractLedgerResp.value3 }}</span>
              </div>
            </div>
            <div class="report-form-list-content">
              <div class="list">
                <span>支出类：</span>
                <span>{{ ContractLedgerResp.value4 }}</span>
              </div>
              <div class="list">
                <span>本月合同数量：</span>
                <span>{{ ContractLedgerResp.value5 }}</span>
              </div>
              <div class="list">
                <span>本年合同数量：</span>
                <span>{{ ContractLedgerResp.value6 }}</span>
              </div>
            </div>
            <div class="report-form-list-content">
              <div class="list">
                <span>收入类：</span>
                <span>{{ ContractLedgerResp.value7 }}</span>
              </div>
              <div class="list">
                <span>本月合同数量：</span>
                <span>{{ ContractLedgerResp.value8 }}</span>
              </div>
              <div class="list">
                <span>本年合同数量：</span>
                <span>{{ ContractLedgerResp.value9 }}</span>
              </div>
            </div>
            <div class="report-form-list-content">
              <div class="list">
                <span>其他类：</span>
                <span>{{ ContractLedgerResp.value10 }}</span>
              </div>
              <div class="list">
                <span>本月合同数量：</span>
                <span>{{ ContractLedgerResp.value11 }}</span>
              </div>
              <div class="list">
                <span>本年合同数量：</span>
                <span>{{ ContractLedgerResp.value12 }}</span>
              </div>
            </div>
          </el-card>
          <div class="con-head">应收情况</div>
          <!-- <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider> -->
          <div class="payeeInfo">
            <el-card class="update-log payeeInfo-left">
              <p>{{ ContractReceivable.value1 }}元</p>
              <p>未收总额</p>
            </el-card>
            <el-card class="update-log payeeInfo-right">
              <div class="payeeInfo-right-select">
                <el-radio-group v-model="radio1" @change="radio1Change">
                  <el-radio-button label="1">本月</el-radio-button>
                  <el-radio-button label="2">本年</el-radio-button>
                </el-radio-group>
              </div>
              <div ref="charts1" class="charts1"></div>
            </el-card>
          </div>
          <div class="con-head">应付情况</div>
          <!-- <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider> -->
          <div class="payeeInfo">
            <el-card class="update-log payeeInfo-left">
              <p>{{ getContractPayable.value1 }}元</p>
              <p>未收总额</p>
            </el-card>
            <el-card class="update-log payeeInfo-right">
              <div class="payeeInfo-right-select">
                <el-radio-group v-model="radio2" @change="radio2Change">
                  <el-radio-button label="1">本月</el-radio-button>
                  <el-radio-button label="2">本年</el-radio-button>
                </el-radio-group>
              </div>
              <div ref="charts2" class="charts2"></div>
            </el-card>
          </div>
          <div class="con-head">预警提醒</div>
          <!-- <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider> -->
          <el-card class="update-log warning-tab-head" v-if="getContractWarning">
            <table class="warning-tab" width="100%" border="1" cellspacing="0" cellpadding="0">
              <tr>
                <th>今日</th>
                <th>本周</th>
                <th>本月</th>
              </tr>
              <tr>
                <td>{{ getContractWarning.value1 }}</td>
                <td>{{ getContractWarning.value3 }}</td>
                <td>{{ getContractWarning.value5 }}</td>
              </tr>
              <tr>
                <td>{{ getContractWarning.value2 }}</td>
                <td>{{ getContractWarning.value4 }}</td>
                <td>{{ getContractWarning.value6 }}</td>
              </tr>
            </table>
          </el-card>
       </div>
      </el-col>
      <el-col :span="10" class="custom-title-box-1">
        <div class="con-head-per">
          <div class="con-head">合同状态</div>
          <!-- <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider> -->
          <div class="payeeInfo1">
            <el-card class="update-log payeeInfo-right-1">
              <div ref="charts3" class="charts3"></div>
            </el-card>
          </div>
        </div>
        <div class="con-head-per">
          <div class="con-head">合同收付金额</div>
          <!-- <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider> -->
          <div class="payeeInfo1">
            <el-card class="update-log payeeInfo-right payeeInfo-right-2">
              <div class="payeeInfo-right-select">
                <el-radio-group v-model="payment.type" @change="paymentChange">
                  <el-radio-button label="1">收款</el-radio-button>
                  <el-radio-button label="2">付款</el-radio-button>
                </el-radio-group>
                <el-date-picker
                  v-model="payment.year"
                  type="year"
                  placeholder="选择年份"
                  style="margin-left: 10px;margin-top: 8px;width: 100px"
                  value-format="YYYY"
                  @change="paymentChange"
                />
              </div>
              <div ref="charts4" class="charts4"></div>
            </el-card>
          </div>
        </div>
        <div class="con-head-per con-head-per-1">
          <div class="con-head">签约前10企业排名</div>
          <!-- <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider> -->
          <el-card class="ranking-list-per">
            <div class="ranking-list" v-for="(item,index) in getContractTop10" :key="index">
              <div class="ranking-list-left">
                <span :class="{ 'ranking-list-1': index === 0, 'ranking-list-2': index === 1, 'ranking-list-3': index === 2 }">{{ index + 1 }}</span>
                <span>{{ item.value1 }}</span>
              </div>
              <span>{{ item.value2 }}</span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import baseConfig from '@/mixins/baseConfig'
import {doGet, doPost, doPut, doDelete, doGetDownload} from '@/config/http'
import {alertErrorMsg, customValidator, notifySuccess} from '@/config/common'
import InputTagDialog from '@/components/InputTag/inputTagDialog.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import User from "@/views/components/base/selectUser.vue";
import Organization from "@/views/components/base/selectOrganization.vue";
import * as echarts from 'echarts';

const emptyObj = {
  code: null, // 合同编码
  name: null, // 合同名称
  type: null, // 合同类型
  contractSignerId: null, // 合同签订人ID
  contractSignerDepartmentId: null, // 合同签订部门ID
  departmentId: null, // 负责部门ID
  userId: null, // 负责人用户ID
  amount: null, // 合同金额
  contractLaunch: null, // 合同起始时间
  contractComplete: null, // 合同终止时间
  needInspection: null, // 是否需要验收
  contractTemplateId: null, // 合同模版ID
  content: null, // 合同内容
  state: null, // 合同状态
  id: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  deleted: null,
  version: null,
}


export default {
  name: 'contractInitial_nocache',
  components: {Organization, User, SvgIcon, InputTagDialog},
  mixins: [baseConfig],
  data() {
    const svc = 'icims-api'
    return {
      svc,
      obj: Object.assign({}, emptyObj),
      routes: [],
      nameOfPermission: null,
      dialogVisible: false,
      dialogType: 'add',
      dialogTypeTitle: '新增',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        sortField: 'id',
        sortType: 'desc',
        code: null,
        name: null,
        type: null,
        contractSignerId: null,
        contractSignerDepartmentId: null,
        departmentId: null,
        userId: null,
        amount: null,
        contractLaunchStart: null,
        contractLaunchEnd: null,
        contractLaunchRange: [],//
        contractCompleteStart: null,
        contractCompleteEnd: null,
        contractCompleteRange: [],//
        needInspection: null,
        contractTemplateId: null,
        state: null,
        createTimeStart: null,
        createTimeEnd: null,
        updateTimeStart: null,
        updateTimeEnd: null,
      },
      selectionList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {
        code: [{ required: false, validator: customValidator, min: 0, max: 20, label: '合同编码', trigger: ['blur', 'change'] }],
        name: [{ required: true, validator: customValidator, min: 1, max: 200, label: '合同名称', trigger: ['blur', 'change'] }],
        type: [{ required: false, validator: customValidator, min: 0, max: 20, label: '合同类型', trigger: ['blur', 'change'] }],
        contractSignerId: [{ required: false, validator: customValidator, min: 0, max: 20, label: '合同签订人ID', trigger: ['blur', 'change'] }],
        contractSignerDepartmentId: [{ required: false, validator: customValidator, min: 0, max: 20, label: '合同签订部门ID', trigger: ['blur', 'change'] }],
        departmentId: [{ required: false, validator: customValidator, min: 0, max: 20, label: '负责部门ID', trigger: ['blur', 'change'] }],
        userId: [{ required: false, validator: customValidator, min: 0, max: 20, label: '负责人用户ID', trigger: ['blur', 'change'] }],
        amount: [{ required: false, validator: customValidator, min: 0, max: 13, label: '合同金额', trigger: ['blur', 'change'] }],
        contractLaunch: [{ required: false, validator: customValidator, min: 0, max: 20, label: '合同起始时间', trigger: ['blur', 'change'] }],
        contractComplete: [{ required: false, validator: customValidator, min: 0, max: 20, label: '合同终止时间', trigger: ['blur', 'change'] }],
        needInspection: [{ required: false, validator: customValidator, min: 0, max: 20, label: '是否需要验收', trigger: ['blur', 'change'] }],
        contractTemplateId: [{ required: false, validator: customValidator, min: 0, max: 20, label: '合同模版ID', trigger: ['blur', 'change'] }],
        content: [{ required: false, validator: customValidator, min: 0, max: 0, label: '合同内容', trigger: ['blur', 'change'] }],
        state: [{ required: false, validator: customValidator, min: 0, max: 20, label: '合同状态', trigger: ['blur', 'change'] }],
      },
      oFiles: [],
      takeEffectVisible: false,
      fileAdVisible: false,
      restartVisible: false,
      endVisible: false,
      gVisible: false,
      chart1: null,
      radio1: '1',
      radio2: '1',
      radio3: '1',
      ContractLedgerResp: { // 合同台账
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
        value6: '',
        value7: '',
        value8: '',
        value9: '',
        value10: '',
        value11: '',
        value12: ''
      },
      ContractReceivable: { // 应收情况
        value1: 0,
        value2: 0,
        value3: 0,
        value4: 0,
        value5: 0
      },
      getContractPayable: {  // 应付情况
        value1: 0,
        value2: 0,
        value3: 0,
        value4: 0,
        value5: 0
      },
      getContractWarning: {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
        value6: '',
      }, // 预警情况
      warningList: [
        {
          aaa: 2,
          bbb: 2000
        }
      ],
      getContractStatus: {
        value1: '',
        value2: '',
        value3: '',
      },
      payment: {
        type: '1',
        year: '2024'
      },
      getContractTop10: null
    }
  },
  computed: {
    routesData() {
      return this.routes
    },
  },
  created() {
    // this.nameOfPermission = 'contractInitial'
    // this.getFavorite(this.nameOfPermission)?.then(res => this.userFavorites = res)
    this.initList()
    this.getList()

  },
  mounted() {

  },
  methods: {
    async initList() {
    },
    async getList() {
      let p1 = doGet(this.svc, '/customContractConsole/getContractLedger', {}, false) // 合同台账
      let p2 = doGet(this.svc, '/customContractConsole/getContractReceivable', {}, false) // 应收情况
      let p3 = doGet(this.svc, '//customContractConsole/getContractPayable', {}, false) // 应付情况
      let p4 = doGet(this.svc, '/customContractConsole/getContractWarning', {}, false) // 预警情况
      let p5 = doGet(this.svc, '/customContractConsole/getContractStatus', {}, false) // 合同状态
      let p6 = doGet(this.svc, '/customContractConsole/getContractTop10', {}, false) // 排名前十企业

      let resArray = await Promise.all([p1, p2, p3, p4, p5, p6])
      this.ContractLedgerResp = resArray[0]
      this.ContractReceivable = resArray[1]
      this.getContractPayable = resArray[2]
      this.getContractWarning = resArray[3]
      this.getContractStatus = resArray[4]
      this.getContractTop10 = resArray[5]
      this.radio1Change('1')
      this.radio2Change('2')

      let data3 = [
        { value: this.getContractStatus.value1, name: '正常' },
        { value: this.getContractStatus.value2, name: '预警' },
        { value: this.getContractStatus.value3, name: '已过期' }
      ]
      this.$nextTick(() => {
        const myChart3 = echarts.init(this.$refs.charts3);
        myChart3.setOption(this.initChart1(data3))
      })

      this.paymentChange()
    },
    radio1Change(val) {
      let data1 = []
      if (val === '1') {
        data1 = [
          { value: this.ContractReceivable.value2, name: '本月应收' },
          { value: this.ContractReceivable.value3, name: '本月已收' }
        ]
      } else {
        data1 = [
          { value: this.ContractReceivable.value4, name: '本年应收' },
          { value: this.ContractReceivable.value5, name: '本年已收' }
        ]
      }
      this.$nextTick(() => {
        const myChart1 = echarts.init(this.$refs.charts1);
        myChart1.setOption(this.initChart(data1))
      })
    },
    radio2Change(val) {
      let data2 = []
      if (val === '1') {
        data2 = [
          { value: this.getContractPayable.value2, name: '本月应收' },
          { value: this.getContractPayable.value3, name: '本月已收' }
        ]
      } else {
        data2 = [
          { value: this.getContractPayable.value4, name: '本年应收' },
          { value: this.getContractPayable.value5, name: '本年已收' }
        ]
      }
      this.$nextTick(() => {
        const myChart2 = echarts.init(this.$refs.charts2);
        myChart2.setOption(this.initChart(data2))
      })
    },
    paymentChange(val) {
      console.log(typeof(val))
      doGet(this.svc, '/customContractConsole/getContractReceiptPayment', this.payment, false).then(res => {
        this.$nextTick(() => {
          const myChart4 = echarts.init(this.$refs.charts4);
          myChart4.setOption(this.initChart2(res.barData, res.lineData))
        })
      })
    },
    initChart(data) {
      let option = {
        title: {
          text: '回款率',
          left: 'center', // 标题居中
          top: 'center', // 标题居中
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          right: '5%'
        },
        series: [
          {
            name: '回款率',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              right: '5%',
              normal: {
                show: true,
                formatter: '{b}: {d}%'
              }
              // position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: data
          }
        ]
      }

      return option
      // obj.setOption()
    },
    initChart1(data) {
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '2%',
          left: 'center'
        },
        label: {
          show: true,
          right: '5%',
          normal: {
            show: true,
            formatter: '{b}: {d}%'
          }
          // position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            top: '-1%',
            data: data,
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      return option
      // obj.setOption()
    },
    initChart2(data1, data2) {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['金额', '月环比'],
          left: 'right'
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 200000,


          },
          {
            type: 'value',
            min: -500,
            max: 1500,

            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '金额',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: data1
          },
          {
            name: '月环比',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + '%';
              }
            },
            data: data2
          }
        ]
      };
      return option
      // obj.setOption()
    },
    handleResetQuery() {
      this.resetForm("listQuery")
      this.listQuery.contractLaunchStart = ''
      this.listQuery.contractLaunchEnd = ''
      this.listQuery.contractLaunchRange = []
      this.listQuery.contractCompleteStart = ''
      this.listQuery.contractCompleteEnd = ''
      this.listQuery.contractCompleteRange = []
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.status = status
    },
    handleSelectionChange(data) {
      this.selectionList = data
    },
    handleSortChange(data) {
      const { prop, order } = data
      this.listQuery.sortField = prop
      this.listQuery.sortType = order === 'ascending' ? 'asc' : 'desc'
      this.handleFilter()
    },
    handleEdit(row) {
      this.goTargetByName('contractInitialEdit', {id: row.id, oper: 'edit'})
    },
    handleView(row) {
      this.goTargetByName('contractInitialEdit', {id: row.id, oper: 'view'})
    },
    handleAdd() {
      this.goTargetByName('contractInitialEdit', {oper: 'add'})
    },
    handlePreview(row) {
      // view:合同预览， edit：合同状态编辑， stateView， 合同状态预览，state：合同状态
      this.goTargetByName('contractInitialOperation', {id: row.id, oper: 'view'})
    },
    handleOperation(row, type, state) {
      // row.state
      if (type === 1) {
        // 编辑模式
        this.goTargetByName('contractInitialOperation', {id: row.id, oper: 'edit', state: state})
      } else {
        // 查看模式
        this.goTargetByName('contractInitialOperation', {id: row.id, oper: 'view', state: state})
      }

    },
    handleExport() {
      doGetDownload(this.svc, '/contract-initial/export', this.listQuery)
    },
    handleDelete(row) {
      doDelete(this.svc, `/contract-initial/${row.id}`, {}).then(() => {
        notifySuccess('操作成功')
        this.getList()
        this.dialogVisible = false
      })
    },
    uploadedSuccessFn() {

    },
    takeEffectFn() {
      console.log('11111111111111')
      this.takeEffectVisible = true
    },
  }
}
</script>
<style scoped>
.warning-tab {
  border: 1px solid black;
  border-collapse: collapse;
}
.warning-tab td {
  padding: 6px 0;
}
.con-head-per {
  width: 100%;
  text-align: center;
  overflow: hidden;

}
/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 5px; /* 设置滚动条的宽度 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 设置轨道的背景颜色 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #888; /* 设置滑块的背景颜色 */
}

/* 当滑块悬停或活动时，可以添加更多样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置滑块在悬停状态下的背景颜色 */
}

.con-head {
  font-size: 20px;
  font-weight: bold;
  color: hsl(330, 67%, 41%);
  /* margin: 10px 0; */
  margin-top: 20px;
}
.custom-title-box {
  height: 100%;
}
.line-img {
  width: 100%;
  margin: 10px 0;
}
.line {
  width: 2px;
  height: 30px;
  background: #303133;
  margin: 0 auto;
}
.line-ico {
  display: block;
  margin: 0 auto;
  margin-top: -10px;
}
.flow {
  margin-top: 10px;
  /* //height: calc(100vh - 200px);
  //overflow-y: hidden; */
}
/* .con-head-per-b {
  //height: calc(100vh - 150px);
  //overflow-y: auto;
} */
.flow-content1 {
  border: 1px solid #303133;
  border-radius: 20px;
  /* padding: 0px 10px; */
}
.flow-content2 {
  font-size: 12px;
  /* border: 1px solid #303133; */
  /* padding: 5px; */
}
.flow-content2 p {
  text-align: center;
}
.flow-content2 p:nth-child(1) {
  color: #E6A23C;
  font-weight: bold;
}
.tai-list {
  margin-top: 15px;
  overflow: hidden;
}
.list {
  width: 33%;
  font-size: 18px;
  font-weight: bold;
  /* margin-top: 20px; */
  margin: 16px 0
  /* margin: 20px; */
}
.list span:nth-child(1) {
  display: inline-block;
  width: 150px;
  text-align: right;
}
.payeeInfo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 250px;
  /* margin: 30px 0; */
  margin-top: 20px;
}

.payeeInfo-left {
  flex: 0.3;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}
.payeeInfo-left p {
  margin: 10px 0;
  font-weight: bold;
  font-size: 18px
}
.payeeInfo-right {
  flex: 0.7;
  margin-left: 10px;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.payeeInfo1 {
  width: 100%;
  height: 262px;
  /* margin: 30px 0; */
  margin-top: 15px;
}
.payeeInfo-right-1 {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.payeeInfo-right-select {
  /* margin-left: 10px;
  margin-top: 10px; */
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 100;
}
.charts1 {
  height: 240px;
  width: 100%;
}
.charts2 {
  height: 240px;
  width: 100%;
}
.charts3 {
  height: 280px;
  width: 100%;
}
/* .payeeInfo-right-2 {
  height: 320px;
} */
.charts4 {
  height: 280px;
  width: 100%;
}
.warning-tab-head {
  margin-top: 30px;
}
.ranking-list-per {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}
.ranking-list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.ranking-list-left span:nth-child(1) {
  font-size: 30px;
  font-weight: bold;
  font-family: Monaco, 'Courier New', monospace;
  padding-left: 20px;
}
.ranking-list-left span:nth-child(2) {
  padding-left: 20px;
}
.ranking-list-1 {
  color: #F56C6C;
}
.ranking-list-2 {
  color: #E6A23C;
}
.ranking-list-3 {
  color: #337ecc;
}

</style>
